import React, {useState} from "react"
import "../../../../assets/scss/pages/release-form.scss"
import {Button, Card, CardBody, CardFooter, Col, FormGroup, Input, Label, Row, UncontrolledTooltip} from "reactstrap";
import {Question, Vkontakte, Facebook, Copy, Tiktok, Instagram, Twitter, Youtube, Spotify, Itunes} from "./icons";
import {setFieldData, setNotification} from "../../../../redux/actions/helper";
import {SET_RELEASE_INFO_FIELD, SET_RELEASE_INFO_VALUE} from "../../../../redux/constants/releaseDetail/tabInfo";
import {URL} from "../../../../services/http.init";


const ArtistInfo = props => {
  const {data, activeStage, stages, params, isEdited, releaseId} = props;
  const {setFieldData, setActiveStage} = props;

  const CopyText = text => {
    let dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
  }

  const goPrev = () => {
    setActiveStage(activeStage - 1 >= 0 ? activeStage - 1 : 0)
  }
  const goNext = () => {
    setActiveStage(activeStage + 1 < stages.length ? activeStage + 1 : stages.length - 1)
  }

  return (
    <div>
      <CardBody className="pb-0 pt-2 card-bdy">
        <Row>
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col xl={4} className="d-flex align-items-center col-1800 col-1620">
                <div className="my-auto">
                  <span className="name">ИМЯ АРТИСТА</span>
                  <span id="artist-name-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="artist-name-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                  <span className="required">*</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <Input
                    type="text"
                    defaultValue={data.project.name || ''}
                    id="artist-name"
                    name="artist-name"
                    disabled
                  />
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col/>
        </Row>

        <Row className="mt-3">
          <Col className="d-flex align-items-center">
            <div className="my-auto">
              <span className="name">Соцсети артиста</span>
              <span id="artist-socials-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="artist-socials-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
            </span>
            </div>
          </Col>
        </Row>

        <Row className="mt-sm-2">
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Vkontakte/>
                  <span className="socials-name">Вконтакте</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_socials && data.artist_socials.vkontakte || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_socials', {
                        ...data.artist_socials,
                        vkontakte: e.target.value
                      })}
                      id="socials-vkontakte"
                      name="socials-vkontakte"
                    />
                    <div onClick={() => CopyText(data.artist_socials && data.artist_socials.vkontakte)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Facebook/>
                  <span className="socials-name">Facebook</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_socials && data.artist_socials.facebook || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_socials', {
                        ...data.artist_socials,
                        facebook: e.target.value
                      })}
                      id="socials-facebook"
                      name="socials-facebook"
                    />
                    <div onClick={() => CopyText(data.artist_socials && data.artist_socials.facebook)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-sm-2">
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Tiktok/>
                  <span className="socials-name">TikTok</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_socials && data.artist_socials.tiktok || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_socials', {
                        ...data.artist_socials,
                        tiktok: e.target.value
                      })}
                      id="socials-tiktok"
                      name="socials-tiktok"
                    />
                    <div onClick={() => CopyText(data.artist_socials && data.artist_socials.tiktok)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Instagram/>
                  <span className="socials-name">Instagram</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_socials && data.artist_socials.instagram || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_socials', {
                        ...data.artist_socials,
                        instagram: e.target.value
                      })}
                      id="socials-instagram"
                      name="socials-instagram"
                    />
                    <div onClick={() => CopyText(data.artist_socials && data.artist_socials.instagram)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-sm-2">
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Twitter/>
                  <span className="socials-name">Twitter</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_socials && data.artist_socials.twitter || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_socials', {
                        ...data.artist_socials,
                        twitter: e.target.value
                      })}
                      id="socials-twitter"
                      name="socials-twitter"
                    />
                    <div onClick={() => CopyText(data.artist_socials && data.artist_socials.twitter)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Youtube/>
                  <span className="socials-name">Youtube</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_socials && data.artist_socials.youtube || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_socials', {
                        ...data.artist_socials,
                        youtube: e.target.value
                      })}
                      id="socials-youtube"
                      name="socials-youtube"
                    />
                    <div onClick={() => CopyText(data.artist_socials && data.artist_socials.youtube)}
                         className="copy-icon" tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row className="mt-3">
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col className="d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Ссылки на магазины</span>
                  <span id="socials-link-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="socials-link-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                </div>
              </Col>
            </Row>
            <Row className="mt-1 mt-sm-2">
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Spotify/>
                  <span className="socials-name">Spotify</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_shops && data.artist_shops.spotify || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_shops', {
                        ...data.artist_shops,
                        spotify: e.target.value
                      })}
                      id="socials-spotify"
                      name="socials-spotify"
                    />
                    <div onClick={() => CopyText(data.artist_shops && data.artist_shops.spotify)} className="copy-icon"
                         tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
            <Row className="mt-1 mt-sm-2">
              <Col lg={4} className="col-1620 d-flex align-items-center">
                <div className="my-auto">
                  <Itunes/>
                  <span className="socials-name">Itunes</span>
                </div>
              </Col>
              <Col>
                <FormGroup>
                  <div className="position-relative">
                    <Input
                      type="text"
                      className="colored-input"
                      value={data.artist_shops && data.artist_shops.itunes || ''}
                      onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_shops', {
                        ...data.artist_shops,
                        itunes: e.target.value
                      })}
                      id="socials-itunes"
                      name="socials-itunes"
                    />
                    <div onClick={() => CopyText(data.artist_shops && data.artist_shops.itunes)} className="copy-icon"
                         tabIndex="0">
                      <Copy/>
                    </div>
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </Col>
          <Col sm={6} className="mt-1 mt-sm-0">
            <Row>
              <Col className="d-flex align-items-center">
                <div className="my-auto">
                  <span className="name">Доп. информация</span>
                  <span id="artist-description-tooltip">
                  <Question/>
                  <UncontrolledTooltip
                    placement="top"
                    target="artist-description-tooltip"
                  >
                    Hello World!
                  </UncontrolledTooltip>
                </span>
                </div>
              </Col>
            </Row>
            <Row className="mt-sm-2">
              <Col>
                <FormGroup>
                  <Input
                    type="textarea"
                    onChange={e => setFieldData(SET_RELEASE_INFO_FIELD, 'artist_description', e.target.value)}
                    value={data.artist_description || ''}
                    id="artist-description"
                    name="artist-description"
                  />
                </FormGroup>
              </Col>
            </Row>
          </Col>
        </Row>
      </CardBody>
      <CardFooter className={`border-0 pt-0 d-flex flex-wrap w-100 mt-3 ${(isEdited && releaseId) ? 'justify-content-between' : 'justify-content-end'}`}>
        {
          (isEdited && releaseId) && <Button.Ripple className="mt-1 cursor-pointer"
                                                  onClick={() => setFieldData(SET_RELEASE_INFO_VALUE, 'params', {
                                                    ...params,
                                                    isEdited: false
                                                  })}
                                                  color="danger">Выход</Button.Ripple>
        }

        <Button.Ripple className="mt-1 cursor-pointer" onClick={goNext} color="primary">Следующий шаг</Button.Ripple>
      </CardFooter>
    </div>
  )
}

export default ArtistInfo

